<template>
  <div class="shopcar">
    <shopinfo :info="info"></shopinfo>
    <!-- 购物车内容 -->
    <div class="buy">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="v in cartList" :key="v.id">
          <van-checkbox :name="v.id" label-disabled>
            <van-card
              :num="v.number"
              :price="v.retail_price"
              :title="v.goods_name"
              :thumb="v.list_pic_url"
            >
              <!-- 步进器 -->
              <template #footer>
                <van-stepper
                  v-model="v.number"
                  :class="showStepper?'':'stepper'"
                  @plus="onChange(1,v.retail_price)"
                  @minus="onChange(0,v.retail_price)"
                />
              </template>
              <!-- 自定义价格样式 -->
              <template #price>
                <span class="fuhao">￥</span>
                <span class="price">{{v.retail_price}}</span>
                <span class="del">.00</span>
              </template>
            </van-card>
          </van-checkbox>
          <!-- 删除滑块 -->
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <!-- 提交订单 -->
    <div class="order">
      <van-submit-bar :price="checkedGoodsAmount" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="toggleAll" @click="checkAll">全选</van-checkbox>
        <template #tip>
          累计共
          <span style="font-weight:700;font-size:16px">{{checkedGoodsNum}}</span>
          件商品，可点击
          <van-button type="primary" size="mini" @click="onStepper">编辑</van-button>按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import shopinfo from "@/components/details/shopinfo";
import { ShopCart } from "@/request/api";
export default {
  components: {
    shopinfo
  },
  computed: {
    // 价格
    checkedGoodsAmount() {
      return this.cartTotal.checkedGoodsAmount * 100;
    },
    checkedGoodsNum() {
      return this.cartTotal.checkedGoodsCount;
    }
  },
  data() {
    return {
      showStepper: false,
      toggleAll: false,
      cartList: [],
      cartTotal: [],
      result: [],
      info: [" 30天无忧退货 ", " 48小时快速退款 ", " 满88元免邮费 "]
    };
  },
  created() {
    ShopCart().then(res => {
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      // 被选中的
      let data = res.data.cartList.filter(v => {
        return v.checked == 1;
      });
      // 多选框被选中的项
      this.result = data.map(v => {
        return v.id;
      });
      if (data.length == this.cartList.length) {
        this.toggleAll = true;
      }
    });
  },
  methods: {
    // 步进器加减
    onChange(e,price) {
      if (e) {
        this.cartTotal.checkedGoodsCount++;
        this.cartTotal.checkedGoodsAmount += price
      } else {
        this.cartTotal.checkedGoodsCount--;
        this.cartTotal.checkedGoodsAmount -= price
      }
    },

    // 全选操作
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(this.toggleAll);
      if (this.toggleAll) {
        // 计算价格
        let price = this.cartList.map(v => {
          return v.number * v.retail_price;
        });
        // 计算件数
        let number = this.cartList.map(v => {
          return v.number;
        });
        console.log(price, number);

        // 累加
        this.cartTotal.checkedGoodsAmount = price.reduce(
          (cur, arr) => cur + arr,
          0
        );
        // 选中多少件
        this.cartTotal.checkedGoodsCount = number.reduce(
          (cur, arr) => cur + arr,
          0
        );
      } else {
        this.cartTotal.checkedGoodsCount = 0;
        this.cartTotal.checkedGoodsAmount = 0;
      }
    },
    
    // 点击编辑
    onStepper() {
      this.showStepper = !this.showStepper;
    },

    // 提交购物车
    onSubmit() {
      let buyShop = this.cartList.map((v)=>{
          return {
            product_id:v.product_id,
            number:v.number,
            retail_price:v.retail_price,
            goods_name:v.goods_name
          }        
      })
      buyShop.payMoney = this.cartTotal.checkedGoodsAmount
      buyShop.buyCount = this.cartTotal.checkedGoodsCount
      console.log(buyShop);
    },
  }
};
</script>

<style lang="less" scoped>
.shopcar {
  background-color: #f4f4f4;
  .buy {
    .stepper {
      display: none;
    }
    span {
      display: inline-block;
      font-size: 12px;
    }
    .fuhao {
      color: #323233;
      font-weight: 500;
    }
    .price {
      font-size: 16px;
      color: #323233;
      margin-left: 3px;
      font-weight: 500;
      font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
    }
    /deep/.van-button--square {
      height: 100%;
    }
    /deep/.van-card__title {
      font-size: 12px;
    }
    /deep/.van-checkbox {
      background-color: #fff;
      border-bottom: 1px solid #ccc;
    }
    /deep/.van-checkbox__label {
      width: 100%;
    }
    /deep/.van-checkbox__icon {
      margin-left: 10px;
    }
    /deep/.van-card {
      background-color: #fff;
      padding: 8px 16px 8px 0;
    }
    /deep/.van-card__num {
      font-size: 12px;
    }
    margin-bottom: 140px;
  }
  .order {
    /deep/.van-submit-bar {
      margin-bottom: 50px;
    }
  }
}
</style>